<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container px-4 py-16 mx-auto space-y-8 lg:max-w-3xl">
		<h2 class="text-2xl font-bold md:text-4xl">Timeline</h2>
		<div class="space-y-8">
			<div class="">
				<h3 class="mb-3 text-lg font-bold md:text-xl">2021</h3>
				<ul class="space-y-4">
					<li class="space-y-1" *ngFor="let i of [1, 2]">
						<div class="flex items-center space-x-2">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 512 512"
								class="w-4 h-4 fill-current"
								[ngClass]="['text' + primary]"
							>
								<path
									d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"
								/>
								<polygon
									points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"
								/>
							</svg>

							<h4 class="font-medium">
								Quis velit quae similique maxime optio temporibus
							</h4>
						</div>
						<p class="ml-7" [ngClass]="['text' + plainInv]">
							Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis
							eligendi aspernatur mum.
						</p>
					</li>
				</ul>
			</div>
			<div class="">
				<h3 class="mb-3 text-lg font-bold md:text-xl">2020</h3>
				<ul class="space-y-4">
					<li class="space-y-1" *ngFor="let i of [1, 2, 3]">
						<div class="flex items-center space-x-2">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 512 512"
								class="w-4 h-4 fill-current"
								[ngClass]="['text' + primary]"
							>
								<path
									d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"
								/>
								<polygon
									points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"
								/>
							</svg>

							<h4 class="font-medium">
								Quis velit quae similique maxime optio temporibus
							</h4>
						</div>
						<p class="ml-7" [ngClass]="['text' + plainInv]">
							Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis
							eligendi aspernatur mum.
						</p>
					</li>
				</ul>
			</div>
			<div class="">
				<h3 class="mb-3 text-lg font-bold md:text-xl">2019</h3>
				<ul class="space-y-4">
					<li class="space-y-1" *ngFor="let i of [1, 2]">
						<div class="flex items-center space-x-2">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 512 512"
								class="w-4 h-4 fill-current"
								[ngClass]="['text' + primary]"
							>
								<path
									d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"
								/>
								<polygon
									points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"
								/>
							</svg>

							<h4 class="font-medium">
								Quis velit quae similique maxime optio temporibus
							</h4>
						</div>
						<p class="ml-7" [ngClass]="['text' + plainInv]">
							Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis
							eligendi aspernatur mum.
						</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</section>
